<template>
  <div id="hmap" class="hmap" ref="hmap">
    <div id="olmap" class="olmap" ref="olmap"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import Feature from 'ol/Feature';
import Polygon from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Circle from 'ol/geom/Circle';
import Overlay from 'ol/Overlay';
import GeoJSON from 'ol/format/GeoJSON';
import {Modify,Select,Draw,DoubleClickZoom,Snap} from 'ol/interaction'
import {OSM, Vector as VectorSource,ImageStatic,ImageWMS} from 'ol/source';
import * as olProj from "ol/proj";
import * as olcontrol from "ol/control";
import {altKeyOnly, click, pointerMove} from 'ol/events/condition';
import {Tile as TileLayer, Vector as VectorLayer,Image as ImageLayer} from 'ol/layer';
import {Circle as CircleStyle, Text, Fill, Stroke, Style} from 'ol/style';
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import {isEmpty} from "@/utils/validate";

let style = new Style({
  image: new CircleStyle({
    radius: 10,
    fill: new Fill({
      color: '#005ca7'
    }),
    stroke:new Stroke({
      color:'#FFFFFF',
      width:3
    })
  })
});
let layer
export default {
  name: "choosepointolwindow",
  props: {
    id: {
      type: String,
      default: ''
    },
    defaultCoord :{
      type:Array,
      default:null
    }
  },
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    updatepoint(coordinate){
      this.map.removeLayer(layer)
      // 创建要素，设置其样式
      var feature = new Feature({
        geometry: new Point(coordinate)
      });
      feature.setStyle(new Style({
        image: new CircleStyle({
          radius: 10,
          fill: new Fill({
            color: '#005ca7'
          }),
          stroke:new Stroke({
            color:'#FFFFFF',
            width:3
          })
        })
      }));
      // 创建数据源，添加要素
      var source = new VectorSource();
      source.addFeature(feature);
      // 创建要素图层
      layer = new VectorLayer({
        source: source
      });
      var circle = new Feature({
        geometry: new Point(
          [120.374798,36.07316])
      });
      circle.setStyle(new Style({
        image: new CircleStyle({
          radius: 0,
          stroke: new Stroke({
            color: 'red',
            size: 1
          })
        })
      }));
      layer.getSource().addFeature(circle);

      // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
      var radius = 0;
      // map.on('postcompose', function(){
      //   // 增大半径，最大20
      //   radius++;
      //   radius = radius % 20;
      //   // 设置样式
      //   circle.setStyle(new ol.style.Style({
      //     image: new ol.style.Circle({
      //       radius: radius,
      //       stroke: new ol.style.Stroke({
      //         color: 'red',
      //         size: 1
      //       })
      //     })
      //   }));
      // })
      this.map.addLayer(layer)
    },
    polt(){
      this.map.on("singleclick", (evt) => {
        this.updatepoint(evt.coordinate)
        this.$emit('coordinate',evt.coordinate);
      });
      },
    closewindow(){
      this.$emit('removeol',this.id)
    },
    init() {
      let imgTileLayer = new TileLayer({
        source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=img_w&tk=67f42928d63ddd24abbe11368b8c287b&x={x}&y={y}&l={z}',
          // url: 'http://t4.tianditu.com/DataServer?T=vec_w&tk=67f42928d63ddd24abbe11368b8c287b&x={x}&y={y}&l={z}',
        }),
      });
      let titleTileLayer = new TileLayer({
        source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=cia_w&tk=67f42928d63ddd24abbe11368b8c287b&x={x}&y={y}&l={z}',
          // url: 'http://t4.tianditu.com/DataServer?T=cva_w&tk=67f42928d63ddd24abbe11368b8c287b&x={x}&y={y}&l={z}',
        }),
      });
      // let imgZSLayer = new TileLayer({
      //   source: new XYZ({
      //     url: 'https://sg.xihesz.com:31019/gisdata/image/{z}/{x}/{y}.png',
      //   }),
      // })
      this.map = new Map({
        layers: [
          imgTileLayer,
          titleTileLayer,
          // imgZSLayer,
          // new ImageLayer({
          //   source: new ImageWMS({
          //     ratio: 1,
          //     url: 'http://n.asd.com:11000/geoserver/shanggao/wms',
          //     crossOrigin: 'anonymous',           //跨域声明
          //     params: {
          //       'FORMAT': 'image/png',
          //       'VERSION': '1.1.1',
          //       'request':'GetMap',
          //       "LAYERS": 'shanggao:image'
          //     }
          //   }),
          //   preload: 1000,
          // })
        ],
        target: this.$refs.olmap,
        view: new View({
          projection: "EPSG:4326",
          center: [118.803141,32.065784],
          zoom: 11
        }),
      });
      if(!isEmpty(this.defaultCoord)){
        this.updatepoint(this.defaultCoord)
        this.map.getView().setCenter(this.defaultCoord)
      }
      this.polt()
      var fullScreenControl = new olcontrol.FullScreen();
      this.map.addControl(fullScreenControl);
    },
  }
}
</script>
<style scoped>

.olmap {
  /*height: calc(100% - 60px);*/
  height: 100%;
  width: 100%;
}

.hmap {
  background: whitesmoke;
  /*border-radius: 10px;*/
  border:2px solid rgba(204, 204, 204, 0.7);
}
</style>


